<template>
	<div class="addGoods">
		<aside class="as1">
			<router-link to="/admin/goods"><span>返回 | 书城管理——商品列表</span></router-link>
			<button @click="html()"><i class="el-icon-refresh-right"></i></button>
		</aside>
		<div class="box">
			<el-upload class="avatar-uploader" :multipe="false"
			            :show-file-list="true" :auto-upload="false"
			            :before-upload="beforeAvatarUpload" 
			            :file-list="fileList"                            
			            :on-change="handleChange"
			            action = "uploadAction"
			            list-type="picture"
			            accept="image/jpg,image/jpeg">
			            <img v-if="form.pic" :src="`${$ip}/api/public/showimg/${form.pic}`" class="avatar">
			            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
			     </el-upload>
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
			  <el-form-item label="商品名称" prop="name">
			    <el-input v-model="form.name" ></el-input>
			  </el-form-item>
			  <el-form-item label="商品序号" prop="sn">
			    <el-input v-model="form.sn"></el-input>
			  </el-form-item>
			  <el-form-item label="商品价格" prop="price">
			    <el-input v-model="form.price"></el-input>
			  </el-form-item>
			  <el-form-item label="商品厂商" prop="maker">
			    <el-input v-model="form.maker"></el-input>
			  </el-form-item>
			  <el-form-item label="书籍作者" prop="author">
			    <el-input v-model="form.author"></el-input>
			  </el-form-item>
			  <el-form-item label="出厂时间">
			    <el-date-picker
			          v-model="form.tmake"
			          type="date"
			          placeholder="选择日期">
			        </el-date-picker>
			  </el-form-item>
			  <el-form-item label="商品库存" prop="stock">
			    <el-input v-model="form.stock"></el-input>
			  </el-form-item>
			  <el-form-item label="商品类型">
			    <el-cascader
			        v-model="value"
			        :options="types"
			       ></el-cascader>
			  </el-form-item>
			  <el-form-item label="详情" prop="info">
			    <el-input type="textarea" v-model="form.info" placeholder="请输入信息"></el-input>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="save()"><i class="el-icon-folder-add"></i>  保存</el-button>
			  </el-form-item>
			</el-form> 			 
		</div>
	</div>
</template>

<script>
	import {createLogger} from "vuex";

  export default {
		name:'AddGoods',
		data(){
			var validate = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('不能为空'));
			        } else {
			          callback();
			        }
			      };
			return{
				all:[],
				fileList: [],
				value:[],
				form:{
					id:0,
					name:'',
					sn:'',
					price:0,
					price2:null,
					maker:'',
					tmake:'',
					pic:'',
					author:'',
					salenum:0,
					stock:0,
					info:'',
					type:{
						id:0,
						isdel:0,
						name:'',
						pid:0,
						prio:0
					}
				},
				types:[],
				rules: {
				         name: [ { validator: validate, trigger: 'blur' }],
				         sn: [{ validator: validate, trigger: 'blur' }],
				         price:[{ validator: validate, trigger: 'blur' }],
						 maker:[{ validator: validate, trigger: 'blur' }],
						 author:[{ validator: validate, trigger: 'blur' }],
						 price:[{ validator: validate, trigger: 'blur' }],
						 stock:[{ validator: validate, trigger: 'blur' }],
						 info:[{ validator: validate, trigger: 'blur' }],
				        }
			}
		},
		methods:{
			html(){
				location.reload();
			},
			handleChange: function(file, fileList) {
			     this.fileList = fileList;
				 console.log(this.fileList);
			},
			beforeAvatarUpload(file) {
			    const isJPG = file.type === 'image/jpeg';
			    const isLt2M = file.size / 1024 / 512;
					
			    if (!isJPG) {
			        this.$message.error('上传图片只能是 JPG 格式!');
			    }
			    if (!isLt2M) {
			        this.$message.error('上传图片大小不能超过 0.5MB!');
			    }

			    return isJPG && isLt2M;
			},
			save(){
				let formData = new FormData();
				let fs = this.fileList;
				console.log('fs='+fs);
				if(fs.length >0 && fs[0].raw != null){
					formData.append("mypic", fs[0].raw);
				}
				formData.append("id",this.form.id);
				console.log("id========");
				console.log(this.form.id);
				formData.append('name',this.form.name);
				formData.append('sn',this.form.sn);
				formData.append('price',this.form.price);
				formData.append('maker',this.form.maker);
				formData.append('tmake',new Date(this.form.tmake).getTime());
				formData.append('pic',this.form.pic);
				formData.append('author',this.form.author);
				formData.append('salenum',this.form.salenum);
				formData.append('stock',this.form.stock);
				formData.append('info',this.form.info);
				let p = this.value.length-1;
				let typeid = 0;
				if(p != 0) typeid = this.value[p];
				formData.append('type.id',typeid);
				this.$postf('/api/adm/book/add',formData).then((resp)=>{
					this.form = resp.data.data.book;
					this.$message({
						message:resp.data.msg,
						type:'success'
					})
				})
				this.form = {};
			},
			getById(id){
				let arr = [];
				this.types.forEach((item)=>{
					item.children.forEach((j)=>{
						if(j.value == id){
							if(item.value !=0 ){
								arr.push(item.value);
							}
							arr.push(j.value);
							return;
						}
					})
				})
				return arr;
			}
		},
		mounted() {
			this.$get('/api/adm/type/findAll2').then((resp)=>{
				console.log(resp.data.data)
				resp.data.data.map((item,i)=>{
					if(item.pid == 0){
						this.types.push({
							value:item.id,
							label:item.name,
						})
					}	
				});
				this.types.forEach((item)=>{
					let list = [];
					resp.data.data.map((j)=>{
						if(item.value == j.pid && j.pid>0){
							list.push({
								value:j.id,
								label:j.name,
							})
							console.log(list);
						}
					})
					item.children = list;
				})
				
				console.log(this.types);
				if(this.$route.query.id != null){
				console.log('id='+this.$route.query.id)
				this.$get('/api/adm/book/findById/'+this.$route.query.id).then((resp)=>{
						console.log(resp.data.data)
						this.form = resp.data.data;
						this.value =  this.getById(resp.data.data.type.id);
					})
				}else{
					this.form.type = {
						id:0,
						isdel:0,
						name:'',
						pid:0,
						prio:0
					}
				}
		});	
	}
}
</script>

<style scoped>
	a{
		color: black;
	}
	.addGoods{
		width: 83%;
		height: 90vh;
		margin-left: 2%;
	}
	.addGoods aside{
		width: 95%;
		margin: 20px auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: gainsboro 1px solid;
	}
	.addGoods aside button{
		background-color: #009688;
		border: none;
		outline: none;
		color: white;
		height: 40px;
		width: 60px;
		border-radius: 3px;
	}
	.addGoods aside span{
		font-size: 15px;
	}
	.addGoods .btu{
		background-color: #009688;
		color: white;
		border: none;
		outline: none;
		width: 150px;
		height: 40px;
		border-radius: 5px;
		margin-left: 40px;
		margin-bottom: 20px;
	}
	.box{
		width: 90%;
		height: 100%;
		margin: 10px auto;
		display: flex;
	}
	  .avatar-uploader:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
		border: 2px #000000 dotted;
		border-radius: 8px;
	    font-size: 40px;
	    color: #8c939d;
	    width: 400px;
	    height: 400px;
	    line-height: 400px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
	 
	  .el-form{
		  width: 40%;
		  height: 400px;
	  }
	 .avatar-uploader  img{
		 width: 400px ;
		 height: 400px ;
	 }
</style>
